<template>
  <view class="guide-container">
    <swiper
      class="guide-swiper"
      :indicator-dots="true"
      :autoplay="false"
      @change="handleSwiperChange"
    >
      <swiper-item v-for="(guide, index) in guides" :key="index" class="guide-item">
        <image :src="url('g', index, 'png')" mode="aspectFill" class="guide-image" />
        <view class="guide-content">
          <text class="guide-title animate__animated" :class="currentIndex === index ? 'animate__fadeInUp' : ''">
            {{ guide.title }}
          </text>
          <text class="guide-desc animate__animated" :class="currentIndex === index ? 'animate__fadeInUp animate__delay-1s' : ''">
            {{ guide.description }}
          </text>
          <view v-if="index === guides.length - 1" class="guide-actions animate__animated animate__fadeIn">
            <button class="bg-primary-new animate__animated animate__pulse animate__infinite animate__delay-1s" @tap="startApp">
              <text class="bi bi-arrow-right-circle"></text>
              开启墨枢物理之旅
            </button>
          </view>
        </view>
      </swiper-item>
    </swiper>
    
    <!-- 跳过按钮 -->
    <view class="skip-btn" @tap="startApp" v-if="currentIndex !== guides.length - 1">
      跳过 {{ currentIndex + 1 }}/3
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const url = $url;
const currentIndex = ref(0);

// 引导页数据
const guides = [
  {
    title: '探索物理世界',
    description: '发现自然规律的奥秘'
  },
  {
    title: '实验与探索',
    description: '动手实践，验证物理原理'
  },
  {
    title: '开启物理之旅',
    description: '让我们一起探索科学的魅力'
  }
];

// 处理滑动变化
const handleSwiperChange = (e) => {
  currentIndex.value = e.detail.current;
};

// 开始使用应用
const startApp = () => {
  // 保存状态到本地存储
  uni.setStorageSync('guide_completed', true);
  // 跳转到登录页
  uni.redirectTo({
    url: '/pages/other/login'
  });
};
</script>

<style lang="scss" scoped>
.guide-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

.guide-swiper {
  width: 100%;
  height: 100%;
}

.guide-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.guide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #fff;
}

.guide-content {
  position: absolute;
  bottom: 160rpx;
  left: 0;
  right: 0;
  padding: 40rpx;
  text-align: center;
  color: #fff;

}

.guide-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.guide-desc {
  font-size: 32rpx;
  opacity: 0.9;
  display: block;
  margin-bottom: 40rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.guide-actions {
  margin-top: 40rpx;
  
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    padding: 24rpx 40rpx;
    background:var(--td-brand-color);
    border-radius: 50rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    box-shadow: 0 8rpx 16rpx var(--td-brand-color);
    border: none;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 8rpx var(--td-brand-color);
    }
    
    .bi {
      margin-right: 16rpx;
      font-size: 36rpx;
    }
  }
}

.skip-btn {
  position: absolute;
  top: 60rpx;
  right: 40rpx;
  padding: 10rpx 30rpx;
  background: var(--td-brand-color);
  backdrop-filter: blur(10rpx);
  border-radius: 30rpx;
  color: #fff;
  font-size: 24rpx;
  z-index: 10;
  
  &:active {
    opacity: 0.8;
  }
}


</style> 